/** Author: Quy Pham
Theme: aothun.vn
CSS framework: Bootstrap
**/


/* General Setting */
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12
{
	padding-left:10px;
	padding-right:10px;
}
h1{font-size:3em;}
h2{font-size:2.5em;}
h3{font-size:2em;}
h4{font-size:1.5em;}
h5{font-size:1.2em;}
body,h1,h2,h3,h4,h5,p,a,{
	color:#555;
}
.row{
	margin-left:-10px;
	margin-right:-10px;
}
.nomargin{
	margin:0;
}
.red{
	color:#e81c25;
}
.nopadding-left{
	padding-left:0;
}
.nopadding-right{
	padding-right:0;
}
.text-center{
	text-align:center;
}
/** variable **/
  $transition-time: 0.25s;
  $primary-color:#e81c25;
/** Header ***/
#top-header{
	height:35px;
	line-height:35px;
	color:#afafaf;
	font-weight:700;
	background:url(img/star-24.png) no-repeat 1px 40%;
	text-indent:-22234px;
	text-transform:uppercase;	
}
#header {
	height:150px;
	background:$primary-color;
	margin-bottom:0;
	border:none;
	.navbar-brand{
		margin:0;
		padding:1.375em 0 1.675em;
		float: left;
		clear: none;
		line-height: 0.925;
		font-size: 18px;

	}
	#navbar{
		display: block;
		margin: 0 0 0 20px;
		padding: 30px 0;
		float: right;
		line-height: 1.75;
		moz-user-select: none;
		webkit-user-select: none;
		ms-user-select: none;
		ul{
			font-size:1em;
			text-align: center;
			font-weight: 700;
			text-transform: uppercase;
			li{
				display: inline-block;
				position: relative;
				margin-left:30px;
				&:first-child{
					margin-left: 0;
				}
				a{
					color:#fff;
					border-bottom: 2px solid #fff;
					margin-bottom: 8px;
					line-height: 1.625;
					text-decoration:none;
					font-size:1em;
					padding:0;
					float:left;
					clear: both;
					background:none;
					transition:  color $transition-time ease, border-color $transition-time ease;
						&:hover,&:focus{
						color:#781a0a;
						border-color: #781a0a;
						background-color:none;
						outline: 0;
						.open {
						background:none;
						}
						}
				}
				ul{
					background:$primary-color;
					padding:0.8em 1em 0.5em 1em;
					border:2px solid #bca474;
					left:10%;
					top:2.5em;
					position:absolute;
					/*visibility: hidden;*/
					z-index: 5000;
					margin-top: -1px;
					li{
						background:none;
						text-align: left;
						text-transform: uppercase;
						padding: 2px 0;
						margin:0;
						width:100%;
					a{
						margin:0;
						border:none;	
						&:hover{
							background:none;
						}
					}
					}
				}
				&:hover ul{
					/*visibility: visible;*/
				}
			}
			.dropdown:hover ul{
				display: block;
				visibility: visible;
				width: 16em;
			}
		}
	}
}
/** Cart icon in navbar **/
#mini-nav{
	ul{
		padding-right:15px;
		li{
			float:right;
			margin-top: 10px;
			height: 40px;
		}
		#cart{
			i{
				font-size:2em;
				}
			a{
				padding:5px !important;
				border-bottom: none !important;
				width: 40px;
				height: 40px;
			&:hover {
				color:#fff !important;
				border: none !important;
				}	
			}
			span{
				font-size:0.9em;
				font-weight: 800;
				position: absolute;
				top:-5px;
				right: -5px;
			}
		}
	}
}

/** Title image **/
#header-title{
	background-position:center;
	background-repeat:no-repeat;
	background-color:#746f75;
	background-size:cover;
		#title{
		height:250px;
		display:table;
		width:100%;
		.vertical-align{
			vertical-align: middle;
			display: table-cell;
			text-align: center;
			h1{
				color:#fff;	
				font-size:3em;
				font-weight: 800;
				line-height: 44px;
			}
			p{
				color: #fff;
			}
		}
	}
}
#body {
	margin-top:60px;
}
#wrapper {
	float:right;
	#left{
		padding-left:10px;
		li{
			margin:0px 0 0 0px;
			text-transform: uppercase;
			display: inline-block;
			a{
				color:$primary-color;
				transition: color $transition-time ease;
				&:hover{
					text-decoration: none;
				}
			}
		}
	}
	#right{
		padding-right:10px;
		li{
			margin:0px 0 0 0px;
			display: inline-block;
			color:#555;
			a{
				font-weight: 800;
				color:#555;
				&:hover{
					text-decoration: none;
				}
			}
		}
	}
	ul{
		list-style: none;
		padding-left:0;
		}
	#items{
		clear: right;
		text-align: center;
		li{
			position: relative;
			height:250px;
			margin-bottom: 20px;
			dd {
				background-color: $primary-color;
				margin: 0;
				padding: 4px 6px 5px 6px;
				position: absolute;
				left:10px;
				width: auto;
				color:#fff;
				display: inline;
				float: left;
				font-weight: 800;
				font-size: 0.9em;
				text-transform: uppercase;
				height: auto;
				z-index: 5000;
				opacity: 1;
				-webkit-transition: opacity $transition-time ease;
				-moz-transition: opacity $transition-time ease;
				-ms-transition: opacity $transition-time ease;
				-o-transition: opacity $transition-time ease;
				transition: opacity $transition-time ease;
			}
			&:hover dd{
				opacity: 0;
				}
			figure{
				position:relative;
				img{
					display: block;
					position:relative;
				}
				figcaption{
					position:absolute;
					padding:20px;
					top:0;left:0;
					background-color:$primary-color;
					h3{
						font-size: 1.2em;
						font-weight: 800;
						margin-top:30px;padding:0;
						color:#fff;
					}
					span{
						font-size:1em;
						color:#ffd500;
						a{
							color:#ffd500;
							padding-bottom:5px;
							&:hover{
								border-bottom: 1px solid #ffd500;
								text-decoration: none;
							}
						}
					}
					hr{
						margin-top:10px;margin-bottom:10px;
						width: 50%;
					}
					button{
						margin-top: 20px;
						text-align: center;
						display: inline-block;
					}
				}
			}
		}
	}		
}
.style1{
		figcaption{
			height: 100%;width:100%;
			opacity: 0;
			text-align: center;
			vertical-align: middle;
			backface-visibility: hidden;
			-webkit-transition: -webkit-transform $transition-time, opacity $transition-time;
			h3{
				margin-top: 30px;
			}
			span{
				display: block;
			}
			a{
				margin-top: 30px;
			}
		}
		figure:hover figcaption, figure.cs-hover figcaption{
			opacity: 0.8;
		}
	} 
/** Paginator **/
#paginator{
	text-align:center;
	li{
		a{
			border:1px solid $primary-color;	
			margin: 0 5px;
			-webkit-transition: all $transition-time ease;
			&:hover {
				background-color:$primary-color;
				color:#fff;
			}
		}
	}
}
/** Sidebar **/
#sidebar{
	section{
		margin-bottom: 20px;
	}
	h4{
		text-transform: uppercase;
		color:#555;
		padding-bottom:10px;
		border-bottom: 2px solid $primary-color;
		font-size: 1em;
		margin: 0 0 10px 0;
	}
	ul{
		list-style:none;
		padding-left:0;
		li{
			a{
				color:#555;
				-webkit-transition: all $transition-time ease;
			&:hover {
				color:#e81c25;
				text-decoration: none;
			}
			}
		}
		.active a{
				color:#e81c25;
			}
	}
	ul.color{

		li{
			margin:0 5px 5px 0;
			position: relative;
			display: inline-block;
			a{
				float: left;
				display:block;
				overflow: hidden;
				height: 20px;
				width: 27px;
				margin: 0;
				em{
					display: none;
				}
				span{
					display: block;
					height: 20px;
					position:absolute;
					left: 0;
					top:0;
					width: 27px;
				}
			}
		}
	}
}
/** Ghost button  **/
@mixin Ghostbtn($color1, $color2,$height,$fontSize,$fontFamily,$radius,$borderWidth){
	 font-family:$fontFamily;
	  display:inline-block;
	  text-decoration:none;
	  border: $borderWidth solid $color1;
	  height:auto;
	  line-height:$height;
	  color:$color1;
	  border-radius:$radius;
	  font-size:$fontSize;
	  padding:.5em 1.5em;
	  transition:all 0.2s ease-out;
	  background:$color2;
	  box-sizing:border-box;
	  cursor:pointer;
	  zoom:1;
	  -webkit-backface-visibility: hidden;
	  position:relative;
	  &:hover{
	    transition: all 0.25s ease; 
	    background-color:$color1;
	    color:$color2;
	  }
	  &:focus{
	    outline:none;
	  }
}
@mixin red-btn($color1, $color2,$height,$fontSize,$fontFamily,$radius,$borderWidth){
	 font-family:$fontFamily;
	  display:inline-block;
	  text-decoration:none;
	  border: $borderWidth solid $color1;
	  height:auto;
	  line-height:$height;
	  color:$color1;
	  border-radius:$radius;
	  font-size:$fontSize;
	  padding:.5em 1.5em;
	  transition:all 0.2s ease-out;
	  background:$color2;
	  box-sizing:border-box;
	  cursor:pointer;
	  zoom:1;
	  -webkit-backface-visibility: hidden;
	  position:relative;
}
@mixin half-ghost-btn($color1, $color2,$height,$fontSize,$fontFamily,$radius,$borderWidth){
	 font-family:$fontFamily;
	  display:inline-block;
	  text-decoration:none;
	  border: $borderWidth solid $color1;
	  height:$height;
	  line-height:$height;
	  color:$color1;
	  border-radius:$radius;
	  font-size:$fontSize;
	  padding:.1em .5em;
	  transition:all 0.2s ease-out;
	  background:none;
	  box-sizing:content-box;
	  cursor:pointer;
	  zoom:1;
	  -webkit-backface-visibility: hidden;
	  position:relative;
	  &:hover{
	    transition: all 0.25s ease; 
	    border: $borderWidth solid $color2;
	    color:$color2;
	  }
	  &:focus{
	    outline:none;
	  }
}

.ghost-btn{
	@include Ghostbtn(#fff,$primary-color,28px,1em,"Helvetica Neue",2px,1px);
}
.ghost-btn-white
{
	@include Ghostbtn($primary-color,#fff,28px,1.2em,"Helvetica Neue",2px,1px);
}
.red-btn{
	@include red-btn(#fff,$primary-color,28px,1.2em,"Helvetica Neue",2px,1px);
}
.gray-btn{
	@include half-ghost-btn(#ccc,$primary-color,28px,0.9em,"Helvetica Neue",2px,1px);
}
/*** Product detail ***/
@mixin title($pad-bottm,$border-color,$border-size,$mar-bottom){
	padding-bottom:$pad-bottm;
	border-bottom: $border-color solid $border-size;
	margin-bottom: $mar-bottom;
}
#breadcrums{
	.breadcrumb{
		background:#f9f9f9;
	}
	margin-bottom:40px;
	h3{
		text-transform: uppercase;
		font-weight: 800;
	}
}
#tab-product{
	ul#tab{
		list-style:none;
		border-bottom:1px solid #e81c25;
		padding-left:10px;
		height: 100%;
		padding-bottom:8px;
		margin-bottom: 40px;
		&:before,&:after{
			content: " ";
			display: table;
			clear:both;
		}
		/*&:before,&:after{display:table; content:" ";}*/
		li{
			display: inline-block;
			position: relative;
			margin-bottom: -1px;
			float: left;
			margin-right: 10px;
			a{
				color:#ccc;
				padding:10px 10px;
				position:relative;
				border-top:1px solid #ccc;
				border-right:1px solid #ccc;
				border-left:1px solid #ccc;
				z-index: 5000;

			}
		&.active{
				a{
					color:#e81c25;
					border-bottom:1px solid #fff;
					border-top:2px solid #e81c25;
					border-right:1px solid #e81c25;
					border-left:1px solid #e81c25;
					background-color:#fff;
				}
			}
		}
	}
}
#galleria{
	height:450px;
}
#comments{
	#title-comments{	
		@include title(10px,#e81c25,1px,20px);
		h4{
			margin-bottom: 0;
		}
	}
}
#related{
	#title-related{
		@include title(10px,#e81c25,1px,20px);
		h4{
			margin-bottom: 0;
		}
	}
	ul{
		list-style: none;
		padding-left:0;
	}
	clear: right;
	text-align: center;
		li{
			position: relative;
			height:250px;
			margin-bottom: 20px;
			dd {
				background-color: $primary-color;
				margin: 0;
				padding: 4px 6px 5px 6px;
				position: absolute;
				left:10px;
				width: auto;
				color:#fff;
				display: inline;
				float: left;
				font-weight: 800;
				font-size: 0.9em;
				text-transform: uppercase;
				height: auto;
				z-index: 5000;
				opacity: 1;
				-webkit-transition: opacity $transition-time ease;
				-moz-transition: opacity $transition-time ease;
				-ms-transition: opacity $transition-time ease;
				-o-transition: opacity $transition-time ease;
				transition: opacity $transition-time ease;
			}
			&:hover dd{
				opacity: 0;
				}
			figure{
				position:relative;
				img{
					display: block;
					position:relative;
				}
				figcaption{
					position:absolute;
					padding:20px;
					top:0;left:0;
					background-color:$primary-color;
					h3{
						font-size: 1.2em;
						font-weight: 800;
						margin-top:30px;padding:0;
						color:#fff;
					}
					span{
						font-size:1em;
						color:#ffd500;
						a{
							color:#ffd500;
							padding-bottom:5px;
							&:hover{
								border-bottom: 1px solid #ffd500;
								text-decoration: none;
							}
						}
					}
					hr{
						margin-top:10px;margin-bottom:10px;
						width: 50%;
					}
					button{
						margin-top: 20px;
						text-align: center;
						display: inline-block;
					}
				}
			}
		}
}
#sidebar-product{
	section{
		margin-bottom: 40px;
		.title-section{
			@include title(10px,#e81c25,1px,20px);
			h4{
				margin:0;
			}
		}
		
	}
	#item-group{
			h4{
				margin-top: 0px;
				margin-bottom: 0px;
				text-transform: uppercase;
			}
			.price{
				color:#e81c25;
				font-weight: 800;
				font-size: 1.2em;
			}
			#cost{
				margin-bottom: 20px;
			}
			#color-select{
				ul.color{
					padding-left:0;
					li{
						margin:0 5px 5px 0;
						position: relative;
						display: inline-block;
						a{
							float: left;
							display:block;
							overflow: hidden;
							height: 30px;
							width: 30px;
							margin: 0;
							em{
								display: none;
							}
							span{
								display: block;
								height: 30px;
								position:absolute;
								left: 0;
								top:0;
								width: 30px;
							}
						}
					}
				}
			
			}
			#size-select{
				ul{
					list-style: none;
					padding-left:0;
					li{
						display: inline-block;
						float:left;
						position: relative;
						margin:0 5px 0px  0;
						a{
							text-align: center;
							font-size: 1em;
							float:left;
							position: relative;
							height: auto;
							span{
								font-size:0.8em;
								line-height: 0.8em;
								display: block;
								margin-top: -5px;
								margin-bottom: 5px;
							}
							&:hover{
								color:#e81c25;
								text-decoration:none;
							}
						}
						/** When click **/
						.picked{
							color:#e81c25;
							border-color: #e81c25;
							-webkit-transition: all $transition-time ease;
							-moz-transition: all $transition-time ease;
							-ms-transition: all $transition-time ease;
							-o-transition: all $transition-time ease;
							transition: all $transition-time ease;
						}
					}
				}
			}
		}
	#designer-infor,#about-design{
			background-color:#f9f9f9;
			padding:20px 10px;

		}
	#designer-infor{
		#designer-name{
			background:#fff;
			padding:10px;
			-webkit-border-radius: 2px;
			 -moz-border-radius: 2px;
			 border-radius: 2px; 				
		}
	}
	#about-design{
		img{
			margin-bottom: 20px;
		}
		#tag{
			button{
				margin-bottom: 5px;
			}
		}
	}
}
/** Cart page **/
#steps{
	margin-bottom:40px;
}

#table-cart{	
/* General Setting table **/
	table{
			border-collapse:collapse;
			margin-bottom: 0;
			width:100%;
			background-color:#fff;
		td,th{
			padding: 1em 1.5em;
			vertical-align: middle;
			display: table-cell;
		}
		td.err{
			background-color: #e992b9;
			color: #fff;
			font-size: 0.75em;
			text-align: center;
			line-height: 1;
		}
		th{
			background-color: #31bc86;
		    font-weight: bold;
		    color: #fff;
		    white-space: nowrap;
		}
		tbody{
			th{
				background-color: #2ea879;
			}
			tr{
				border-bottom:1px solid #ccc;
			}
			tr:nth-child(2n) {
				 background-color: #f9f9f9;
   				 -webkit-transition: all $transition-time ease;
   				 -moz-transition: all $transition-time ease;
   				 -ms-transition: all $transition-time ease;
   				 -o-transition: all $transition-time ease;
   				 transition: all $transition-time ease;
			}
		}
	/** Detail custom **/
		thead{
			td{
				text-align: center;
				font-weight: 800;
				color:#555;
			}
			tr{
				border-bottom:1px solid #ccc;
			}
		}
		tbody{
			.cir-cancel{
				a{
					color:#d9d9d9;
					font-size: 2em;
					font-weight: 100;
					-webkit-transition: all $transition-time ease;
					-moz-transition: all $transition-time ease;
					-ms-transition: all $transition-time ease;
					-o-transition: all $transition-time ease;
					transition: all $transition-time ease; 
					
					&:hover{
						color:#ccc;
					}				
				}
			}
			td.product-name{
				ul{
					list-style-type:none;
					margin-bottom: 0;
					padding-left:0;
					li{
						display: table-cell;
						position: relative;
						vertical-align: middle;
					}
					.des{
						p{
							padding-left:10px;
							margin-bottom: 0;
						}
					}
				}
			}
			.product-quality{
				text-align: center;
				/** Custom button number increments sidebar*/
				form{
					margin-bottom: 10px;
				}
				.qty {
				    width: 30px;
				    height: 31px;
				    text-align: center;
				    padding:5px;
					box-shadow:none;
					background:#fff;
					margin:0;
					border:1px solid #d9d9d9;
				}
				input{
					position: relative;
					float: left;
				}
				input.qtyplus { 
					width:30px;
					margin:0;
					padding:5px;
					border:1px solid #d9d9d9;
					box-shadow:none;
					background:#fff;
					border-right:none;
				}
				input.qtyminus { 
					width:30px;
					border:1px solid #d9d9d9;
					padding:5px;
					margin:0;
					box-shadow:none;
					background:#fff;	
					border-left:none;
				}
			}
			.total-product{
				text-align: center;
				p{
					font-weight: 800;
					color:#e81c25;
				}
			}
		}	
	}
	#under-table{
		padding: 1em 0;
		border-bottom:1px solid #ccc;
		input[type="text"]{
			border-radius: 2px;
			color:#555;
			border:1px solid #ccc;
			padding: 0.5em 1em;
			font-size:1.2em;
			line-height: 28px;
		}
	}
	#order-infor{
		h4{
			float: right;
			position:relative;
			padding:1em 0;
			margin: 0
		}
		tr{
			background:#fff;
			border:none;
			td{
				padding: 0.5em;
			}
			h1,h2,h3,h4,h5{
				margin:0;
			}
		}
		table{
			border-top:1px solid #ccc;
		}
		#name{
			padding-left:0;
		}
		#cost{
			padding-right:0;
		}
	}
}
/** Information customer page **/
#infor-form{
	h5{
		padding:1em;
		background-color:#f9f9f9;
		border-bottom: 1px solid #ccc;
		margin:0 0 20px 0;
	}
	label{
		color:#111;
		font-weight: normal;
	}
}
#sider-cart,#sider-cart-gray{
	border:2px solid #e81c25;
	padding: 20px;

	h5{
		margin: 0 0 10px 0;
		padding-bottom:10px;
		border-bottom: 1px solid #ccc;
	}
	table{
		margin-bottom: 20px;
		thead{
			td{
				font-weight: bold;
				padding:10px 0;
			}
		}
		tbody,tfoot{
			td{
				padding:10px 0;
				border-bottom: 1px solid #ccc;
			}
		}
		tfoot{
			td{
				border:none;
			}
		}
	}
	#methods{
		border-bottom:1px solid #ccc;
		input[type="submit"]{
			width:100%;
		}
	}
	input[type="submit"]{
		margin-top: 40px;
	}
}
#sider-cart-gray{
	border:2px solid #ccc;
}
#alert{
	border-radius:2px;
	padding:1em;
	border:1px solid #ccc;
	background-color:#f9f9f9;
	margin-bottom:40px;
	p{
		margin: 0;
	}
	i{
		font-size:1.5em;
	}
}
/** Footer **/
#logo-slider-wraper{
	margin:60px 0 40px 0;
	padding-top:40px;
	border-top:2px solid #ccc;

}
#footer-btn{
	padding:40px 0;
	border-top:2px solid #ccc;
}
footer{
	padding:40px 0;
	border-top:2px solid #ccc;
}